<template>
  <div class="base-count">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script>
export default {
  // 为了确保不同组件实例之间的数据不互相影响，data必须是一个函数，因为组件每次实例化时，都会执行一次data函数，从而得到一个新的数据对象
  data() {
    // 一定要返回一个对象，因为这个返回的对象会作为组件实例的数据对象
    return {
      count: 100,
    }
  },
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>